<template>
	<view class="review-box page-box">
		<u-navbar bgColor="transparent" height="74">
			<view class="u-nav-slot" slot="left" @click="goBack">
				<image style="height: 63rpx;width: 50rpx; scale: 0.8;" src="@/static/images/review/fanhui.png" />
			</view>
			<view class="u-nav-slot-center" slot="center">
				<span>智能听写</span>
			</view>
			<view class="u-nav-slot-right" slot="right">
				<image style="height: 53rpx;width: 53rpx; margin: 0 40rpx 0 32rpx;"
					src="@/static/images/review/set.png" />
				<image style="height: 53rpx;width: 53rpx; " src="@/static/images/review/help2.png" />
			</view>
		</u-navbar>
		<view class="content">
			<view class="content-son">
				<view class="word flex-align-center">
					<image  src="@/static/images/review/erji.png" />
					<span class="word-name">请听音写词</span>
				</view>
				<view class="input-custom">
					<input type="text" focus class="inputText"/>
				</view>
			</view>
		</view>
		<view class="demo-train">
			学习数据
		</view>
		<view class="right-btn">
			<view class="image-bj image-yin-bj flex-center">
				看答案
			</view>
			<view class="image-bj image-yin-bj flex-center"  >
				<image src="../../../../static/images/review/yinliang.png" class="image-yin"></image>
			</view>
			<view class="image-bj image-follow flex-center"  >
				提交
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		components: {

		},
		data() {
			return {

			};
		},
		methods: {
			goBack() {
				uni.navigateBack({
					delta: 1
				})
			},
			tabChange(val) {
				console.log(val);
				this.currentTab = val;
			}
		}
	}
</script>

<style lang="scss">
	@function px_2_vw($px) {
		@return #{$px * 100 / 1920}vw;
	}

	.page-box {
		background: #505CFE;
		position: relative;
	}

	.u-nav-slot-center {
		display: flex;
		align-items: center;
		color: #B0B0B0;
		font-size: px_2_vw(54);

	}

	.u-nav-slot-right {

		display: flex;
		align-items: center;
		justify-content: center;

		.playback-speed {
			width: px_2_vw(233);
			height: px_2_vw(49);
			font-size: px_2_vw(29);
			color: #B0B0B0;
			background-image: url('@/static/images/review/bofangsudu.png');
			background-size: 100% 100%;
		}
	}

	.content {
		width: 77%;
		height: 70%;
		background: #616CFF;
		border-radius: 65rpx;
		padding: 30rpx;
		margin: 160rpx auto;

		.content-son {
			padding: 100rpx;
			width: 100%;
			height: 100%;
			background: #fff;
			border-radius: 20rpx;
			font-weight: bold;
			font-size: px_2_vw(56);
			display: flex;
			flex-direction: column;
			align-items: center;
			.word {
				image {
					width: px_2_vw(108);
					height: px_2_vw(113);
				}
			}
			
			.word-name {
				color: #8ABBFF;
				margin-left: 30rpx;
			}
			.input-custom {
				width: 100%;
				height: px_2_vw(120);
				margin-top: 120rpx;
				// ::v-deep .uni-input-wrapper{
				// 	height: px_2_vw(120) !important;
				// 	caret-color:red;

				// }
			}
		}
	}

	.right-btn {
		position: absolute;
		right: 0;
		top: 160rpx;
		padding: 33rpx;
		height: 70%;
		font-size: px_2_vw(42);
		color: #B0B0B0;
		display: flex;
		flex-direction: column;
		justify-content: space-around;

		.image-bj {
			width: px_2_vw(158);
			height: px_2_vw(151);

		}

		.image-yin {
			width: px_2_vw(80);
			height: px_2_vw(67);
		}

		.image-yin-bj {
			background-image: url('@/static/images/review/bofang-bj.png');
			background-size: 100% 100%;
		}

		.image-follow {
			background-image: url('@/static/images/review/gendu-bj.png');
			background-size: 100% 100%;
		}
	}

	.demo-train {
		color: #fff;
		width: px_2_vw(76);
		height: px_2_vw(192);
		position: absolute;
		writing-mode: vertical-rl;
		letter-spacing: 5rpx;
		left: 0;
		top: 50%;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		font-size: px_2_vw(29);
		color: #FDFDFF;
		background-image: url('../../../../static/images/review/xuexishuju.png');
		background-size: 100% 100%;
	}
	
	.inputText{
	    // min-height: 76rpx;
		min-height: px_2_vw(120);
	     
	    font-size: 36rpx;
	    padding-left: 20rpx;
	    border-radius: 8rpx;
		caret-color:#3B96FC;
		border: 4rpx solid #3B96FC;
		background: #93BFF1;
		border-radius: 20rpx;
		text-align: center;
	}
</style>